<template>
  <div class="recordWrapper">
    <el-row>
      <el-col :span="24">
        <title-com>
          <div>
            操作日志
            <i class="el-icon-refresh pointer font-des"></i>
          </div>
        </title-com>
        <div class="flex m-t-20">
          <el-space>
            <span>所属企业</span>
            <el-select size="small">
              <el-option></el-option>
            </el-select>
            <span>用户id:</span>
            <el-input placeholder="模糊搜索" size="small"></el-input>
          </el-space>
          <!-- 日期 -->
          <el-space class="m-l-20">
            <span>日期</span>
            <el-select size="small">
              <el-option></el-option>
            </el-select>
            <el-input placeholder="模糊搜索" size="small"></el-input>
          </el-space>
        </div>
        <div class="m-t-20">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="用户id"></el-table-column>
            <el-table-column prop="Co" label="所属企业"> </el-table-column>
            <el-table-column prop="account" label="账号类型"> </el-table-column>
            <el-table-column prop="custom" label="客户类型"></el-table-column>
            <el-table-column
              prop="operatePage"
              label="操作页面"
            ></el-table-column>
            <el-table-column
              prop="operateType"
              label="操作类型"
            ></el-table-column>
            <el-table-column prop="date" label="时间" width="300">
            </el-table-column>
          </el-table>
        </div>
        <div class="ta-right m-t-20">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="50"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import TitleCom from "@/components/title.vue";
export default defineComponent({
  components: {
    TitleCom,
  },
  methods: {
    handleSizeChange(val: number) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val: number) {
      console.log(`当前页: ${val}`);
    },
    Collect(row: number) {
      // console.log(row);
      // this.collect = false;
    },
    CancelCollect(row: number) {
      // console.log(row);
      // this.collect = true;
    },
  },
  data() {
    return {
      dialogVisible: false,
      row: [],
      currentPage4: 4,
      options1: [
        {
          value: "近三天",
          label: "近三天",
        },
        {
          value: "近五天",
          label: "近五天",
        },
        {
          value: "近一周",
          label: "近一周",
        },
      ],
      options2: [
        {
          value: "未查看",
          label: "未查看",
        },
        {
          value: "正在处理",
          label: "正在处理",
        },
        { value: "已解决", label: "已解决" },
        {
          value: "未找到原因",
          label: "未找到原因",
        },
      ],
      type: "未查看",
      value1: "",
      value2: "",
      tableData: [
        {
          id: "shy",
          Co: "薄言信息",
          account: "体验",
          custom: "自营",
          operatePage: "报表查看",
          operateType: "选择任务",
          date: "2012-12-12",
        },
        {
          id: "shy",
          Co: "薄言信息",
          account: "体验",
          custom: "自营",
          operatePage: "报表查看",
          operateType: "选择任务",
          date: "2012-12-12",
        },
        {
          id: "shy",
          Co: "薄言信息",
          account: "体验",
          custom: "自营",
          operatePage: "报表查看",
          operateType: "选择任务",
          date: "2012-12-12",
        },
        {
          id: "shy",
          Co: "薄言信息",
          account: "体验",
          custom: "自营",
          operatePage: "报表查看",
          operateType: "选择任务",
          date: "2012-12-12",
        },
        {
          id: "shy",
          Co: "薄言信息",
          account: "体验",
          custom: "自营",
          operatePage: "报表查看",
          operateType: "选择任务",
          date: "2012-12-12",
        },
        {
          id: "shy",
          Co: "薄言信息",
          account: "体验",
          custom: "自营",
          operatePage: "报表查看",
          operateType: "选择任务",
          date: "2012-12-12",
        },
        {
          id: "shy",
          Co: "薄言信息",
          account: "体验",
          custom: "自营",
          operatePage: "报表查看",
          operateType: "选择任务",
          date: "2012-12-12",
        },
      ],
    };
  },
});
</script>

<style lang="scss" scoped>
.recordWrapper {
  background: #fff;
  padding: 20px;
  height: 100%;
}
</style>
